<template>
    <basic-container class="main">
        <basic-header></basic-header>
        <div style="margin-top: 100px">
            <router-view/>
        </div>
        <basic-footer/>
    </basic-container>
</template>

<script>
    import BasicHeader from "@/components/basic-header/index";
    import BasicFooter from "@/components/basic-footer/index";

    export default {
        name: "basic-page",
        components: {BasicFooter, BasicHeader},
        mounted() {
            document.addEventListener('scroll', this.scrollToTop)
        },
        methods: {
            scrollToTop() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                console.log(scrollTop)
            },
        },
        destroyed() {
            document.removeEventListener('scroll', this.scrollToTop)
        }
    }
</script>

<style scoped>
    .main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>